<template>
  <div v-if="showAnimationFlag">
    <FirstAnimation :showAnimationFlag="showAnimationFlag" @handleClickLogo="handleClickLogo"/>
  </div>
  <div class="home" v-else>
    <QxHead @showModal="showMenuModal"></QxHead>
    <Menu :showModal="showModalFlag" @handleHideModal="handleHideModal" @getMenuList="getMenuList" @handleChangeLan="handleChangeLan"/>
    <swiper loop auto height="3.74rem" :duration="800" dots-position="center">
      <swiper-item  class="swiper-demo-img" v-for="(item, index) in swiperList" :key="index">
        <a @click="preview(item.img)" :href="item.url?item.url:'#'" style="display:block;height:3.74rem;width:100%;" :style="{backgroundImage: 'url(' +item.img+ ')'}"></a>
      </swiper-item>
    </swiper>
    <div class="head_group_business">
      <p>{{ $i18n.messages[lang].groupIndustry }}</p>
      <p class="common_p" v-if="lang == 'zh'">GROUP BUSINESS</p>
    </div>
    <ul class="group_list">
      <li v-for="(item, index) in groupBusiList" :style="{backgroundImage: 'url('+item.img+')'}" @click="handleClickIndex(index)">
      </li>
    </ul>
    <div class="hope" :style="{backgroundImage: hopeBg}">
      <p>
        <span style="display: block;color: #fcdaa7">{{$i18n.messages[lang].missionVision}}</span>
        <span style="display: block;color: #fcdaa7" class="common_p" v-if="lang == 'zh'">Corporate Mission</span>
      </p>
      <p style="color: #fcdaa7" v-html="$i18n.messages[lang].createValProduct"></p>
    </div>
    <div class="news_list" v-if="lang=='zh'">
      <div class="">
        <p>新闻快讯</p>
        <p class="common_p">OUR NEWS</p>
      </div>
      <ul class="list flex-cont">
        <li v-for="(item, index) in newsList" @click="$router.push(`/newsDetail?id=${item.id}`)">
          <img :src="'https://qiaoxin.oss-cn-shenzhen.aliyuncs.com'+item.cover_image" alt="">
          <p class="news_title">{{item.title}}</p>
          <p class="news_time">{{_getTime(item.create_time)}}</p>
        </li>
      </ul>
      <div class="btn-navigate-more" @click="$router.push('/news?type=news')">
        了解更多 >
      </div>
    </div>
    <div class="qx_yunqi">
      <img src="../images/yunqi.png" alt="" @click="$router.push('/houseList')" v-if="lang == 'zh'">
      <img src="../images/project-img1.jpeg" alt="" @click="$router.push('/houseList')" v-else-if="lang == 'en'">
      <div class="circle_bg" :style="{backgroundImage: circleBg}">
        <ul class="flex-cont">
          <li v-if="lang == 'zh'">
            <a href="http://oa.qiaoxinsz.com/login.jsp">员工登录</a>
          </li>
          <li v-if="lang == 'zh'">
            <!--<a href="http://mail.qiaoxinsz.com:9981/webmail/">企业邮箱</a>-->
            <a href="http://mail.qiaoxinsz.com">企业邮箱</a>
          </li>
          <li>
            <a @click="handleAnnounce">{{$i18n.messages[lang].disclaimer}}</a>
          </li>
          <li>
            <a @click="handleConcern">{{$i18n.messages[lang].followUs}}</a>
          </li>
        </ul>
      </div>
    </div>
    <FixedMask :content="maskContent.content" :lang="lang" :title='maskContent.title' :url="maskContent.url" :showMask="showMaskFlag" @handleCloseMask="handleCloseMask"></FixedMask>

    <!--<FixedMask :content="maskContent" :showMask="showMaskFlag" @handleCloseMask="handleCloseMask"></FixedMask>-->
    <BottomInfo :lang="lang"/>
  </div>
</template>
<script>
	var _hmt = _hmt || [];
	(function() {
		var hm = document.createElement("script");
		hm.src = "https://hm.baidu.com/hm.js?0c6b7133f8b076c80f30ef205bddbfab";
		var s = document.getElementsByTagName("script")[0];
		s.parentNode.insertBefore(hm, s);
	})();
import { SwiperItem, Swiper } from 'vux'
import BottomInfo from "./common/bottomInfo";
import QxHead from "./common/qxHead";
import Menu from "./common/menu";
import FixedMask from "./common/fixedMask";
import FirstAnimation from "./common/FirstAnimation";
let CONSTANT = require('../../wechat/static/constant/constant.js'),
    common = require("../../wechat/static/common/common.js"),
    wsService = require("../../wechat/static/common/wechat-jsdk.js");

export default {
  components: {
    SwiperItem,
    Swiper,
    BottomInfo,
    QxHead,
    Menu, FixedMask,FirstAnimation
  },
  data() {
      return {
          lang: "",
        list:'',
        showAnimationFlag: true,
        swiperList:[],
        showModalFlag: false,
        showMaskFlag: false,
        newsList: [],
        demoList:[],
        stateTatus:'',
        groupBusiList: [{
          img: require("../images/real_estate.png"),
          link: "/houseList"
        },{
          img: require("../images/construction.png"),
          link: ""
        }, {
          img: require("../images/aviation.png"),
            url: "http://www.redair.cn/"
        }, {
          img: require("../images/investment.png"),
            link: ""
        }, {
          img: require("../images/logistics.png"),
            url: "http://www.gdqiying.com.cn/"
        }, {
          img: require("../images/cloud.png"),
            url: "http://www.ccsccn.com/"
        }, {
          img: require("../images/culture.png"),
            url: "http://www.hainancx.com/"
        }],
        hopeBg: 'url('+require("../images/hope_bg.png")+')',
        circleBg: 'url('+require("../images/circle_bg.png")+')',
        maskContent: {
            title: "",
            content: "",
            url: ""
        }
      }
    },
    mounted() {
        this.lang = this.$i18n.locale

        if (this.lang == 'zh') {
            this.groupBusiList =[{
                img: require("../images/real_estate.png"),
                link: "/houseList"
            },{
                img: require("../images/construction.png"),
                link: ""
            }, {
                img: require("../images/aviation.png"),
                url: "http://www.redair.cn/"
            }, {
                img: require("../images/investment.png"),
                link: ""
            }, {
                img: require("../images/logistics.png"),
                url: "http://www.gdqiying.com.cn/"
            }, {
                img: require("../images/cloud.png"),
                url: "http://www.ccsccn.com/"
            }, {
                img: require("../images/culture.png"),
                url: "http://www.hainancx.com/"
            }]
        } else if (this.lang == 'en') {
            this.groupBusiList =[{
                img: require("../images/real_estate_en.png"),
                link: "/houseList"
            },{
                img: require("../images/construction_en.png"),
                link: ""
            }, {
                img: require("../images/aviation_en.png"),
                url: "http://www.redair.cn/"
            }, {
                img: require("../images/investment_en.png"),
                link: ""
            }, {
                img: require("../images/logistics_en.png"),
                url: "http://www.gdqiying.com.cn/"
            }, {
                img: require("../images/cloud_en.png"),
                url: "http://www.ccsccn.com/"
            }, {
                img: require("../images/culture_en.png"),
                url: "http://www.hainancx.com/"
            }]
        }
      this.getTopNews()
      this.getSliderList()
        if (common.getCookie("showAnimationFlag")) {
          this.showAnimationFlag = false
        }
    },
    methods: {
        handleChangeLan(lan) {
            this.lang = this.$i18n.locale
            if (this.lang == 'zh') {
                this.groupBusiList =[{
                    img: require("../images/real_estate.png"),
                    link: "/houseList"
                },{
                    img: require("../images/construction.png"),
                    link: ""
                }, {
                    img: require("../images/aviation.png"),
                    url: "http://www.redair.cn/"
                }, {
                    img: require("../images/investment.png"),
                    link: ""
                }, {
                    img: require("../images/logistics.png"),
                    url: "http://www.gdqiying.com.cn/"
                }, {
                    img: require("../images/cloud.png"),
                    url: "http://www.ccsccn.com/"
                }, {
                    img: require("../images/culture.png"),
                    url: "http://www.hainancx.com/"
                }]
            } else if (this.lang == 'en') {
                this.groupBusiList =[{
                    img: require("../images/real_estate_en.png"),
                    link: "/houseList"
                },{
                    img: require("../images/construction_en.png"),
                    link: ""
                }, {
                    img: require("../images/aviation_en.png"),
                    url: "http://www.redair.cn/"
                }, {
                    img: require("../images/investment_en.png"),
                    link: ""
                }, {
                    img: require("../images/logistics_en.png"),
                    url: "http://www.gdqiying.com.cn/"
                }, {
                    img: require("../images/cloud_en.png"),
                    url: "http://www.ccsccn.com/"
                }, {
                    img: require("../images/culture_en.png"),
                    url: "http://www.hainancx.com/"
                }]
            }
        },
      getMenuList(data) {

      },
      handleClickLogo(bool) {
        this.showAnimationFlag = bool
        common.setCookie("showAnimationFlag", 1)
      },
      getSliderList() {
          let url = CONSTANT.URL.getSliderList;
          common.requestGetAjax(url, {}, {page: '/index.html'}, (res) => {
              if (res.code == 200) {
                  res.data.map( item => {
                      this.swiperList.push({
                          url: 'javascript:',
                          img: 'https://qiaoxin.oss-cn-shenzhen.aliyuncs.com'+item.image,
                          title: ""
                      })
                  })
              }
          })
      },
      handleCloseMask(bool) {
        this.showMaskFlag = bool
      },
      showMenuModal(bool) {
        this.showModalFlag = bool
      },
      handleHideModal(bool) {
        this.showModalFlag = bool
      },
      getTopNews() {
        let url = CONSTANT.URL.getTopNews
        common.requestGetAjax(url, {}, {}, (res) => {
          if (res.code == 200) {
              res.data.splice(2, 1)
            this.newsList = res.data
          }
        })
      },
      handleAnnounce() {
            this.maskContent.content = this.$i18n.messages[this.lang].shengming
//        this.maskContent.content = "<p>本网站所有内容和资源的版权归本网站所有，页面所有信息受《中华人民共和国著作权法》及相关法律法规和中国加入的所有知识产权方面的国际条约的保护。未经本网站事先的书面许可，任何单位和个人不得就本网站上的相关资源以任何方式、任何文字做全部或局部复制、修改、发送、储存、发布、交流或分发，或利用本网站上的相关资源创建其他商业用途的资源。否则本网站将追究其法律责任。</p><p>本网站负责对本网站上的信息进行审核与更新，但并不就信息的时效性、准确性以及服务功能的完整性和可靠性承担任何义务和赔偿责任。</p><p>任何因不可抗力、系统故障、通讯故障、网络拥堵、供电系统故障、恶意攻击等造成本网站未能及时、准确、完整地提供服务而造成的损失,本网站均得免责。</p><p>无论在任何原因下，您通过使用本网站上的信息或由本网站链接的其他网站上的信息，或其他与本网站链接的网站上的信息所导致的任何损失或损害,本网站均得免责。</p><p>如用户利用系统差错、故障或其他原因导致的漏洞，损害本网站及任何第三方的权益，本网站将终止该用户资格，并保留法律追究的权利。</p>"
        this.maskContent.title = ""
          this.showMaskFlag = true
      },
      handleConcern() {
        this.maskContent.content = '<p><img src="https://qiaoxin.oss-cn-shenzhen.aliyuncs.com/uploads/20181008/0f07780b5feb8a049f73b2f6925992b5.jpg" alt=""></p>'
          this.maskContent.title = ""
          this.showMaskFlag = true

      },
      handleClickIndex(index) {
          switch (index) {
              case 0:
                  this.maskContent = this.$i18n.messages[this.lang].content1
                  break;
              case 1:
                  this.maskContent = this.$i18n.messages[this.lang].content2
                  break;
              case 2:
                  this.maskContent = this.$i18n.messages[this.lang].content3
                  break;
              case 3:
                  this.maskContent = this.$i18n.messages[this.lang].content4
                  break;
              case 4:
                  this.maskContent = this.$i18n.messages[this.lang].content5
                  break;
              case 5:
                  this.maskContent = this.$i18n.messages[this.lang].content6
                  break;
              case 6:
                  this.maskContent = this.$i18n.messages[this.lang].content7
          }
          this.showMaskFlag = true
      },
      _getTime(stamp) {
        return common.timeStampToDate(stamp)
      },
      preview(img) {
          let arr = []
          this.swiperList.map( item => {
              arr.push(item.img)
          })
          wsService.default.previewImage(img, arr);
      },
    }
  };
</script>
<style lang="less">
  .home {
    /*padding-bottom: 1.31rem;*/
    width: 100%;
    height: 100%;
    header {
      position: relative;
      .head_logo {
        height: .9rem;
        line-height: .9rem;
        text-align: center;
        img {
          width: 2.21rem;
          vertical-align: middle;
        }
        a.btn-fold {
          position: absolute;
          right: .28rem;
          img {
            width: .33rem;
          }
        }
      }
    }
    .swiper-demo-img {
      a {
        -webkit-background-size: cover!important;
        background-size: cover!important;
        background-position: center;
        background-repeat: no-repeat;
      }
    }
    .head_group_business {
      text-align: center;
      margin-top: .35rem;
      margin-bottom: .27rem;
      p {
        color: #2155A0;
        &:first-child {
          font-weight: bold;
          font-size: .38rem;
        }
      }
    }
    .group_list {
      li {
        width: 6.94rem;
        height: 1.32rem;
        -webkit-background-size: cover;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        margin: 0 auto;
        border-bottom: 1px solid #fff;
        a {
          display: inline-block;
          width: 100%;
          height: 100%;
        }
      }
    }
    .hope {
      width: 100%;
      height: 3.82rem;
      background-position: center;
      background-repeat: no-repeat;
      -webkit-background-size: cover;
      background-size: cover;
      margin-top: .49rem;
      margin-bottom: .47rem;
      text-align: center;
      padding-top: .5rem;
      p {
        color: #fff;
        font-size: .38rem;
        font-weight: bold;
        &:last-child {
          margin-top: .9rem;
        }
      }
    }
    .news_list {
      div:first-child {
        text-align: center;
        color: #2155A0;
        font-size: .38rem;
        margin-bottom: .41rem;
        font-weight: bold;
      }
      .list {
        width: 100%;
        overflow-x: scroll;

        li {
          width: 3.19rem;
          margin-right: .14rem;
          &:first-child {
            /*margin-left: .28rem;*/
          }
          &:last-child {
            margin-right: 0;
            /*padding-right: .28rem;*/
          }
          img {
            width: 3.19rem;
            height: 2.13rem;
            vertical-align: middle;
          }
          p.news_title {
            margin-top: .16rem;
            margin-bottom: .15rem;
            font-size: .25rem;
            color: #333;
            line-height: .33rem;
            white-space: nowrap;
            text-overflow: ellipsis;
            /*display: -webkit-box;*/
            /*-webkit-box-orient: vertical;*/
            /*-webkit-line-clamp: 2;*/
            overflow: hidden;
            /*word-wrap: break-word;*/
            /*word-break: break-all;*/
            overflow: hidden;
            /*height: .6rem;*/
          }
          p.news_time {
            color: #999;
            font-size: .21rem;
          }
        }
      }
      .btn-navigate-more {
        margin-top: .3rem;
        text-align: center;
        color: #0055a6;
        font-size: .28rem;
      }
    }
    .qx_yunqi {
      margin-top: .49rem;
      position: relative;
      img {
        width: 6.94rem;
        margin-left: .28rem;
        vertical-align: middle;
      }
      .circle_bg {
        /*position: absolute;*/
        width: 100%;
        height: 2.75rem;
        vertical-align: middle;
        -webkit-background-size: cover;
        background-size: cover;
        background-position: center;
        margin-top: -1.19rem;
        ul {
          position: absolute;
          width: 100%;
          bottom: .53rem;
          font-size: .23rem;
          li {
            border-right: 1px solid #fff;
            padding: 0 .2rem;
            &:last-child {
              border-right: 0;
            }
            a {
              color: #fff;
            }
          }
        }
      }
    }
  }
</style>

